<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - 添加藏品</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="__PUBLIC__/admin/favicon.ico">
    <link href="__PUBLIC__/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/demo/webuploader-demo.css">

    <link href="__PUBLIC__/admin/css/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        .ay-header-action-bar {
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid rgb(224, 224, 224);
        }

        .ay-header-action-bar a {
            color: grey;
            line-height: 30px;
        }
        .img-div{
            border: 1px solid #ddd;
            border-radius: 100%;
            float: left;
            line-height: 1;
            margin-left: 5px;
            overflow: hidden;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ay-header-action-bar">
        <div class="pull-left">
            <a href="{:URL('collect/collection')}">
                <i class="fa fa-chevron-left"></i> 返回
            </a>
        </div>
        <div class="pull-right">
        </div>
    </div>

    <div class="wrap" style="text-align: left; margin-left: auto; margin-right: auto;">
        <form role="form" class="form-horizontal" action="{:url('News/newedit')}" method="post" enctype="multipart/form-data" onsubmit="return checkform();">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">藏品信息</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    藏品名称
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input  type="text" class="form-control" name="name">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    合同号
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="num">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>

                            </div>

                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                   装裱形式                  <!---->
                                    
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="mount">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    类别
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="type">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    作者
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text"  class="form-control" name="author">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    委托单位
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="user">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    首次入库时间
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input name="time" class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                                    <a style="float:right;color:red;margin-top:10px;">*</a>
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    状态
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <select type="text" data-live-search="true" class="form-control" name="state">
                                        <option value="">请选择</option>
                                        <option value="0">入库</option>
                                        <option value="1">出库</option>
                                        <option value="2">转库</option>

                                    </select>
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    库区号
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="cnum">
                                    <a style="float:right;color:red;margin:-20px;">*</a>
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    完整程度
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="integrity">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    内径尺寸
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="size">
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    外径尺寸
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="fsize">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    年代
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="years">
                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    征集人
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="zman">
                                </div>
                            </div>
                            <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    图录号
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="card">

                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    释文
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="sintroduce">

                                </div>
                            </div>
                            <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    临时入库时间
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input name="lsrtime"class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">


                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    临时出库时间
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input name="lsctime"class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">

                                </div>
                            </div>
                            <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    题跋
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="ts">

                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    款识
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="ks">

                                </div>
                            </div>
                            <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    钤印
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="yj">

                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    备注
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="remarks">

                                </div>
                            </div>
                            <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    保管单价
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="bgprice">

                                </div>
                                <label class="col-xs-2 col-md-2 control-label">
                  材质             
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="material">
                                </div>

                            </div>
                             <div class="form-group">


                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
             委托人
                                </label>
                                <div class="col-xs-3 col-md-3">
                                    <input type="text" class="form-control" name="wtr">

                                </div>
                               

                            </div>


                            <div class="form-group">
                                <label class="col-xs-2 col-md-2 control-label">
                                    <!---->
                                    藏品简介
                                </label>
                                <div class="col-xs-8 col-md-8">
                                    <textarea style="resize: none;" type="text" class="form-control" class="introduce" name="introduce"></textarea>
                                </div>
                            </div>


                            <div class="form-group">
                                <!--<div style="margin :0px auto; width:990px;">

                                    <input type="file"  name="file[]" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />

                                    <div id="dd" style=" width:990px;"></div>

                                </div>-->

                                 <label class="col-xs-2 col-md-2 control-label">
                                     <!---->
                                     图片上传
                                 </label>
                                 <div class="col-xs-8 col-md-8">
                                     <form id="form"  enctype="multipart/form-data">
                                         <input type="file" id="xdaTanFileImg"  multiple="multiple"  name="fileAttach[]" onchange="xmTanUploadImg(this)"/>
                                         <div class="img-box" id="imgboxid">

                                         </div>
                                         <div id="xmTanDiv"></div><br/>
                                     </form>
                                 </div>
                            </div>


                        </div>
                        <div class="form-actions text-center">
                            <input type="submit" class="btn btn-primary btn-lg" style="width: 200px;" value="添加">

                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 全局js -->
<script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="__PUBLIC__/admin/js/content.js?v=1.0.0"></script>
<!-- layerDate plugin javascript -->
<script src="__PUBLIC__/admin/js/plugins/layer/laydate/laydate.js"></script>
<script>
    //外部js调用
    laydate({
        elem: '#timebuying', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //外部js调用
    laydate({
        elem: '#entrydate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });
</script>
<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = 'js/plugins/webuploader';
</script>
<script src="__PUBLIC__/admin/js/plugins/webuploader/webuploader.min.js"></script>

<script src="__PUBLIC__/admin/js/demo/webuploader-demo.js"></script>

<!--<script>
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
            var imgObjPreview = document.getElementById("img"+i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            }

            else {
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);

                localImagId.style.width = "150px";
                localImagId.style.height = "180px";

                try {

                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                }

                catch (e) {

                    alert("您上传的图片格式不正确，请重新选择!");

                    return false;

                }

                imgObjPreview.style.display = 'none';

                document.selection.empty();

            }

        }



        return true;

    }


</script>-->
</body>
</html>
<script type="text/javascript">
    //选择图片，马上预览
    function xmTanUploadImg(obj) {

        var fl=obj.files.length;
        for(var i=0;i<fl;i++){
            var file=obj.files[i];
            var reader = new FileReader();

            //读取文件过程方法

            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");
                var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';
                var oimgbox=document.getElementById("imgboxid");
                var ndiv=document.createElement("div");

                ndiv.innerHTML=imgstr;
                ndiv.className="img-div";
                oimgbox.appendChild(ndiv);
            }

            reader.readAsDataURL(file);
        }
    }
</script>
<script>
    function checkform(){
        var name=$("input[name='name']").val();
        if($.trim(name)==''){
            alert('请填写藏品名称');
            return false;
        }
        var num=$("input[name='num']").val();
        if($.trim(num)==''){
            alert('请填写合同号');
            return false;
        }
        var mount=$("input[name='mount']").val();
        if($.trim(mount)==''){
            alert('请填写装裱形式');
            return false;
        }
        var type=$("input[name='type']").val();
        if($.trim(type)==''){
            alert('请填写类别');
            return false;
        }
        var author=$("input[name='author']").val();
        if($.trim(author)==''){
            alert('请填写作者');
            return false;
        }
        var user=$("input[name='user']").val();
        if($.trim(user)==''){
            alert('请填写委托单位');
            return false;
        }
        var time=$("input[name='time']").val();
        if($.trim(time)==''){
            alert('请选择首次入库时间');
            return false;
        }

        var state=$("select[name='state']").val();
        if($.trim(state)==''){
            alert('请选择状态');
            return false;
        }
        var cnum=$("input[name='cnum']").val();
        if($.trim(cnum)==''){
            alert('请填写库区号');
            return false;
        }

    }



</script>
<script>
    //检查图片的格式是否正确,同时实现预览
    function setImagePreview(obj, localImagId, imgObjPreview) {
        var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
        if (obj.value == '') {
            $.messager.alert("提示", "让选择要上传的图片!");
            flag = false;
            return false;
        }
        else {
            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
            ////布尔型变量
            var isExists = false;
            var objValue = obj.value;
            try {
                //对于IE判断要上传的文件的大小
                var fso = new ActiveXObject("Scripting.FileSystemObject");
                fileLenth = parseInt(fso.getFile(objValue).size);
            } catch (e) {
                try {
                    //对于非IE获得要上传文件的大小
                    fileLenth = parseInt(obj.files[0].size);
                } catch (e) {
                    flag = false;
                    return false;
                }
            }
            //循环判断图片的格式是否正确
            for (var i in array) {
                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                    //图片格式正确之后，根据浏览器的不同设置图片的大小
                    if (obj.files && obj.files[0]) {
                        //火狐下，直接设img属性
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '180px';
                        imgObjPreview.style.height = '200px';
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                        imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
                        if (fileLenth > 102400) {
                            $.messager.alert("提示", "请选择小于100k的图片!");
                            flag = false;
                            return false;
                        }
                    }
                    else {
                        //IE下，使用滤镜
                        obj.select();
                        var imgSrc = document.selection.createRange().text;
                        //必须设置初始大小
                        localImagId.style.width = "180px";
                        localImagId.style.height = "200px";
                        //图片异常的捕捉，防止用户修改后缀来伪造图片
                        try {
                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                        }
                        catch (e) {
                            $.messager.alert("提示", "您上传的图片格式不正确，请重新选择!");
                            flag = false;
                            return false;
                        }
                        imgObjPreview.style.display = 'none';
                        document.selection.empty();
                    }
                    isExists = true;
                    flag = true;
                    return true;
                }
            }
            if (isExists == false) {
                $.messager.alert("提示", "上传图片类型不正确!");
                flag = false;
                return false;
            }
            flag = false;
            return false;
        }
    }
</script>
<script type="text/javascript">

    //下面用于多图片上传预览功能

    function setImagePreviews(avalue) {

        var docObj = document.getElementById("doc");

        var dd = document.getElementById("dd");

        dd.innerHTML = "";

        var fileList = docObj.files;

        for (var i = 0; i < fileList.length; i++) {



            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";

            var imgObjPreview = document.getElementById("img"+i);

            if (docObj.files && docObj.files[i]) {

                //火狐下，直接设img属性

                imgObjPreview.style.display = 'block';

                imgObjPreview.style.width = '150px';

                imgObjPreview.style.height = '180px';

                //imgObjPreview.src = docObj.files[0].getAsDataURL();

                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

            }

            else {

                //IE下，使用滤镜

                docObj.select();

                var imgSrc = document.selection.createRange().text;

                alert(imgSrc)

                var localImagId = document.getElementById("img" + i);

                //必须设置初始大小

                localImagId.style.width = "150px";

                localImagId.style.height = "180px";

                //图片异常的捕捉，防止用户修改后缀来伪造图片

                try {

                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                }

                catch (e) {

                    alert("您上传的图片格式不正确，请重新选择!");

                    return false;

                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }
</script>